<template>
  <div style="display: flex">
    <category-panel
      title="分类"
      icon="tree"
      request="articleCategory"
      @delClick="delClick"
      @notClick="notClick"
      @nodeClick="nodeClick"
      type="1"
      :recycle="recycle"
    ></category-panel>
    <el-container>
      <el-header>
        <div class="report_header" ref="headerHeight">
          <div class="report_header_left"></div>
          <div
            style="
              width: 300px;
              display: flex;
              align-items: center;
              margin-left: 10px;
            "
          >
            <svg-icon class="primary" :icon-class="$route.meta.icon" />
            <span style="margin-left: 5px" class="primary">{{
              $route.meta.title
            }}</span>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              width: 100%;
            "
          >
            <div
              style="
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                overflow: hidden;
                height: 41px;
              "
            >
              <div class="report_header_query">
                <el-input
                  prefix-icon="el-icon-search"
                  placeholder="标题"
                  v-model="query.title"
                ></el-input>
              </div>
            </div>
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="queryClick"
              v-permission="['hotspot.query']"
              >查询</el-button
            >
            <el-button
              style="margin-left: 10px; margin-top: 5px"
              size="small"
              type="primary"
              @click="addClick"
              v-permission="['hotspot.add']"
              >新增</el-button
            >
          </div>
        </div>
        <!--        <div>-->
        <!--          <svg-icon class="primary" :icon-class="$route.meta.icon"/>-->
        <!--          <span class="primary">{{$route.meta.title}}</span>-->
        <!--        </div>-->
        <!--        <div class="header-button-container">-->
        <!--          <el-button :icon="queryType? 'el-icon-search':'el-icon-close'" type="primary"-->
        <!--                     @click="chooseClick">{{queryType == false?'隐藏':'查询'}}-->
        <!--          </el-button>-->
        <!--          <el-button v-permission="['article.add']" icon="el-icon-plus" type="primary" style="margin-left: 10px" @click="addClick">新增-->
        <!--          </el-button>-->
        <!--        </div>-->
      </el-header>
      <div class="pd10">
        <!--        <div style="margin-bottom: 10px;display: flex;align-items: center" v-show="queryType == false">-->
        <!--          <el-input prefix-icon="el-icon-search" placeholder="标题" style="width: 200px"-->
        <!--                    v-model="query.title"></el-input>-->
        <!--          <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" @click="queryClick">查询-->
        <!--          </el-button>-->
        <!--          <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info"-->
        <!--                     @click="resetClick">-->
        <!--            重置-->
        <!--          </el-button>-->
        <!--        </div>-->
        <el-table
    
          :data="articleData"
          border
          stripe
          :height="curHeight"
          v-loadMore="[payLoads, 'article-list']"
          ref="table"
          style="width: 100%"
        >
          <el-table-column type="index" width="50" align="center" fixed>
          </el-table-column>
          <el-table-column
            label="标题"
            align="left"
            :show-overflow-tooltip="text_overflow"
            prop="title"
          >
          </el-table-column>
          <el-table-column
            label="副标题"
            width="300"
            align="left"
            :show-overflow-tooltip="text_overflow"
            prop="subTitle"
          >
          </el-table-column>

             <el-table-column
            label="作者"
          
            align="left"
            prop="author"
          >
             </el-table-column>
          <el-table-column label="排序" align="center" width="80" prop="orders">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.orders"
                @blur="bulrOrders(scope.row)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="100"
            align="center"
            prop="isDraft"
          >
            <template slot-scope="{ row }">
              <el-tag :type="row.isDraft | statusTagFilter">
                {{ row.isDraft | watchStatus }}</el-tag
              >
            </template>
          </el-table-column>

          <el-table-column
            v-if="deleted == true"
            label="审核"
            width="130"
            align="center"
            prop="isDraft"
          >
            <template>
              <el-button type="info">弃审</el-button>
            </template>
          </el-table-column>

          <el-table-column
            v-if="deleted == false"
            label="审核"
            width="130"
            align="center"
            prop="isDraft"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="examine(scope.row)"
                >审核</el-button
              >
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="120"
            v-if="deleted == false"
          >
            <template slot-scope="scope">
              <div>
                <el-tooltip
                  v-permission="['hotspot.edit']"
                  class="item"
                  effect="dark"
                  content="查看"
                  v-show="deleted == false"
                  placement="top-start"
                >
                  <a @click="editClick(scope.row)">
                    <i style="color: #409eff" class="el-icon-edit"></i>
                  </a>
                </el-tooltip>
                <!-- <el-tooltip class="item" v-permission="['article.del']" effect="dark" content="恢复活动" v-show="deleted == true" placement="top-start">
                  <a style="margin-left: 10px" @click="restoreArticle(scope.row)">
                    <i style="color: #E6A23C" class="el-icon-refresh-right"></i>
                  </a>
                </el-tooltip> -->
                <el-tooltip
                  v-permission="['hotspot.del']"
                  class="item"
                  effect="dark"
                  content="删除"
                  v-show="deleted == false"
                  placement="top-start"
                >
                  <a
                    style="margin-left: 10px"
                    @click="deleteArticle(scope.row)"
                  >
                    <i style="color: #f56c6c" class="el-icon-delete"></i>
                  </a>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          @pagination="loadArticle"
        ></pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import { mapGetters } from "vuex";
import { list, del, update, updateArticle, find } from "@/api/article";
import utils from "../../utils/utils.js";
import { EventBus } from "@/api/eventBus";
import Pagination from "@/components/Pagination";
import CategoryPanel from "@/components/CategoryPanel";
import loadMore from "@/utils/loadMore.js";
export default {
  name: "hostpot-list",
  directives: { permission, loadMore },
  data() {
    return {
      recycle:false,
    
      articleData: [],
      pageNum: 1,
      pageSize: 20,
      total: 0,
      queryType: true,
      query: {
        title: "",
      },
      keyword: {
        title: "",
      },
      curHeight: null,
      excelData: [],
      articleCategoryId: "",
      deleted: false,
      stateForm: {
        id: "",
        published: 1,
      },
      restoreForm: {
        id: "",
        deleted: false,
      },
      text_overflow: false,
      payLoads: "",
      sorting: {
        id: "",
        orders: "",
      },
    };
  },
  components: { Pagination, CategoryPanel },
  created() {
    var _this = this;
    this.loadArticle();
    EventBus.$on("article-add", (res) => {
      // 监听新增完毕
      // 更新列表数组
      _this.articleData.splice(0, 0, res);
    });
    EventBus.$on("article-edit", (res) => {
      // 监听新增完毕
      // 更新列表数组
      for (var i = 0; i < _this.articleData.length; i++) {
        if (_this.articleData[i].id == res.id) {
          _this.articleData[i] = res;
        }
      }
    });
  },
  activated() {
    this.payLoads = new Date().getTime();
  },
  computed: {
    ...mapGetters(["mchId"]),
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  filters: {
    watchStatus(val) {
      if (val == false) {
        return "已发布";
      } else {
        return "未发布";
      }
    },
    statusTagFilter(val) {
      if (val == false) {
        return "success";
      } else {
        return "info";
      }
    },
  },
  methods: {
    examine(row) {
      let findid = row.id;
      console.log(findid);
      find(findid)
        .then((res) => {
          console.log(res);
          //  this.articleData.isDraft=!this.articleData.isDraft
          this.arraybac = res.data.article;

          console.log(this.arraybac.isDraft);
          this.arraybac.isDraft = false;

          console.log(this.arraybac.isDraft);
          // this.article.isDraft=!this.article.isDraft
          //   console.log(this.article);
        })
        .catch((error) => {
          console.log("error!!");
        });
      // console.log(row.isDraft);
      // console.log(row.id);
      // console.log(this.articleData);
      // let params = new URLSearchParams();
      // params.append("isDraft", row.isDraft);
      this.$confirm("确认审核发布?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(this.arraybac);
          delete this.arraybac.articleCategoryName;
          update(this.arraybac)
            .then((res) => {
              console.log(res);
              this.articleData = res.data.data;
              this.loadArticle();
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    beforeMount() {
      var _this = this;
      window.onresize = () => {
        return (() => {
          if (this.queryType == false) {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 266; //减去页面上固定高度height
          } else {
            var h =
              document.documentElement.clientHeight ||
              document.body.clientHeight;
            _this.curHeight = h - 220; //减去页面上固定高度height
          }
        })();
      };
    },
    comeIn() {
      console.log("222");
      var h =
        document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 220; //减去页面上固定高度height
    },
    editClick(row) {
      this.$router.push({
        path: "/hotspot/edit",
        query: { id: row.id },
      });
    },
    loadArticle() {
      var _this = this;
      let params = new URLSearchParams();
      params.append("pageNum", _this.pageNum);
      params.append("pageSize", _this.pageSize);
      params.append("title", _this.keyword.title);
      params.append("articleCategoryId", _this.articleCategoryId);
      params.append("deleted", _this.deleted);
      params.append("mchId", this.mchId);
      params.append("articleType", 1);
      list(params)
        .then((response) => {
          console.log(response);
          _this.articleData = response.data.data;
          console.log(_this.articleData.meta);
          _this.total = response.data.total;
        })
        .catch((error) => {
          console.log("error!!");
        });
    },

    chooseClick() {
      this.queryType = !this.queryType;
      if (this.queryType == false) {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 266; //减去页面上固定高度height
      } else {
        var h =
          document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 220; //减去页面上固定高度height
      }
    },
    addClick() {
      this.$router.push({
        path: "/hotspot/add",
      });
    },
    deleteArticle(data) {
      console.log(data);
      var _this = this;
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(data.id)
            .then((response) => {
              console.log(response);
              _this.articleData.forEach(function (item, index) {
                if (item.id == data.id) {
                  _this.articleData.splice(index, 1);
                }
              });
              _this.$message({
                message: response.content,
                offset: 120,
                center: true,
              });
            })
            .catch((error) => {
              console.log("error!!");
            });
        })
        .catch(() => {});
    },
    queryClick() {
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadArticle();
    },
    resetClick() {
      this.query.title = "";
      this.keyword = this.query;
      this.pageNum = 1;
      this.loadArticle();
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    notClick() {
  
      this.articleCategoryId = 0;
      this.deleted = false;
      this.loadArticle();
    },
    delClick() {

      this.deleted = true;
      this.articleCategoryId = "";
      this.loadArticle();
    },
    nodeClick(data) {
   
      this.deleted = false;
      this.articleCategoryId = data.id;
      this.loadArticle();
    },
    // restoreArticle(row) {
    //   var _this = this
    //   console.log(row);
    //   this.$confirm('确认恢复?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     this.restoreForm.id = row.id;
    //     update(_this.restoreForm).then(response => {
    //       console.log(response);
    //       _this.articleData.forEach(function(item, index) {
    //         if (item.id == row.id) {
    //           _this.articleData.splice(index, 1)
    //         }
    //       })
    //       _this.$message({
    //         message: response.content,
    //         offset: 120,
    //         center: true
    //       });
    //     }).catch(error => {
    //       console.log('error!!')
    //     });
    //   }).catch(() => {
    //   });
    // },
    bulrOrders(data) {
      console.log(data);
      this.sorting.id = data.id;
      this.sorting.orders = data.orders;
      this.saveSorting();
    },
    saveSorting() {
      var _this = this;
      updateArticle(_this.sorting)
        .then((response) => {
          console.log(response);
          _this.articleData.forEach(function (item) {
            if (item.id == response.data.id) {
              item.orders = response.data.orders;
            }
          });
          _this.$message({
            message: response.content,
            offset: 120,
            center: true,
          });
        })
        .catch((error) => {
          console.log("error!!");
        });
    },
  },
};
</script>
<style scoped>
.el-footerBox {
  height: 50px !important;
  line-height: 50px !important;
  border-top: 1px solid #f2f2f2;
}
.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/.el-header {
  padding: 10px;
  /* height: 100% !important; */
  padding-bottom: 0;
}

.report_header {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  background-color: rgba(248, 248, 248, 0.8);
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}
.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409eff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.report_header_date {
  margin-left: 10px;
  width: 250px;
  margin-top: 5px;
}
.report_header_query {
  margin-left: 10px;
  width: 180px;
  margin-top: 5px;
}
</style>
